{extend name='common/common' /}
{block name="style"}
<style media="screen">
	.previewImg{
		cursor: pointer;
	}
</style>
{/block}
{block name="content"}
<el-card class="box-card">
	<div slot="header">
		<span class="span-primary"><i class="fa fa-list"></i></span>
		文章列表
		{if authCheck('articles/articleadd')}
		<a href="{:url('articles/articleadd')}">
			<el-button type="primary" class="header-btn" icon="el-icon-plus" plain size="small">添加文章</el-button>
		</a>
		{/if}
	</div>
	<div id="table-box">
		<el-form :inline="true" class="search-table-form">
			<el-form-item>
				<el-input
					placeholder="请输入搜索内容"
					clearable="true"
					prefix-icon="el-icon-search"
					v-model="searchText">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="info" plain @click="getTable">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" stripe="true" border>
			<el-table-column prop="id" label="ID" width="70" align="center" sortable></el-table-column>
			<el-table-column prop="cate_name" label="分类名称" sortable></el-table-column>
			<el-table-column prop="title" label="文章标题"></el-table-column>
			<el-table-column prop="description" label="文章描述"></el-table-column>
			<el-table-column prop="keywords" label="关键字" align="center"></el-table-column>
			<el-table-column prop="add_time" label="发布时间" align="center" sortable></el-table-column>
			<el-table-column prop="thumbnail" align="center" label="缩略图">
				<template slot-scope="scope">
					<img class="previewImg" :src="scope.row.thumbnail" width="50" height="50" @click="previewImg(scope.row)">
				</template>
			</el-table-column>
			<el-table-column prop="operate" align="center" label="操作">
				<template slot-scope="scope">
					{if authCheck('articles/articleedit')}
					<el-tooltip effect="dark" open-delay="500" hide-after="1500"
						content="编辑" placement="bottom">
						<el-button
							@click="editRow(scope.row)"
							size="small" plain type="success" circle
							icon="el-icon-edit">
						</el-button>
					</el-tooltip>
					{/if}
					{if authCheck('articles/articledel')}
					<el-tooltip effect="dark" open-delay="500" hide-after="1500"
						content="删除" placement="bottom">
						<el-button
							@click="delRow(scope.row)"
							size="small" plain 	type="danger" circle
							icon="el-icon-delete">
						</el-button>
					</el-tooltip>
					{/if}
				</template>
			</el-table-column>
		</el-table>
		<div class="table-page">
			<el-pagination
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:current-page="pageNumber"
				:page-sizes="[10, 20, 50, 75]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableTotal">
			</el-pagination>
		</div>
	</div>
</el-card>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data() {
		return {
			loading:false,
			tableData:'',
			searchText:'',
			pageSize:10,
			pageNumber:1,
			tableTotal:0,
		}
	},
	mounted:function(){
		this.getTable();
	},
	methods:{
		getTable(){
			this.loading=true;
			$.post('./index',{
				'pageSize':this.pageSize,
				'pageNumber':this.pageNumber,
				'searchText':this.searchText
			},function(res){
				main.loading=false;
				if(res.code == 1){
					main.$message({
			          message: res.msg,
			          type: 'success'
			        });
					main.tableData = res.data.rows;
					main.tableTotal = res.data.total;
				}else{
					main.$notify.error({
						title: '失败',
						message: res.msg,
					});
				}
			})
		},
		pageSizeChange(val) {
			this.pageSize = val;
			this.getTable();
		},
		curPageChange(val) {
			this.pageNumber = val;
			this.getTable();
		},
		previewImg(row) {
			previewAlert.show = true;
			previewAlert.url = row.thumbnail;
		},
		editRow(row) {
			window.location.href = "{:url('articles/articleEdit')}?id=" + row.id;
		},
		delRow(row) {
			this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				$.post('./articleDel',{
					'id':row.id
				},function(res){
					if(res.code == '1'){
						main.$notify({
							title:"成功",
							type:"success",
							message:res.msg
						});
						main.getTable();
					}else{
						main.$notify.error({
							title:"错误",
							message:res.msg
						})
					}
				})
			}).catch(() => {
				this.$notify.info({
					title: '消息',
					message: '已取消删除'
				});
			});
		}
	}
})
</script>
{/block}
